<!--  -->
<template>
  <div>
    <el-card class="main-card">
      <!-- 
        v-if 判断true/false 重建和删除document，对标签元素进行删除和展示，造成性能浪费
        v-show 判断true/false 不管元素存不存在都会先渲染，通过display属性进行显示和隐藏
        应用场景：经常对元素进行展示，用v-show，反之用v-if
       -->
      <div v-show="!open">
        <el-row>
          <el-col :span="8">
            <search :value="queryInfo.queryString" @search="querySearch"/>
          </el-col>
          <el-col :span="2">
            <el-button
              style="margin-left: 10px"
              @click="insert"
              type="primary"
              v-hasPermi="['USER_INSERT']"
              >添加信息</el-button
            >
          </el-col>
        </el-row>
        <el-table
          :data="tableList"
          ref="tableRef"
          stripe
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column prop="name" label="用户名" />
          <el-table-column prop="sex" label="性别" :formatter="formatSex" />
          <el-table-column label="头像">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="
                  scope.row.avatar.startsWith('https')
                    ? scope.row.avatar
                    : $qiniu + scope.row.avatar
                "
                :preview-src-list="preview(scope.row.avatar)"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="角色标签值">
            <template slot-scope="scope">
              <el-tag
                size="mini"
                v-for="(item, index) in scope.row.roles"
                :key="index"
              >
                {{ item.label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="phoneNumber" label="电话号码" />
          <el-table-column prop="address" label="地址" show-overflow-tooltip />
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="update(scope.row)"
                v-hasPermi="['USER_UPDATE']"
                size="small"
                icon="el-icon-edit"
                circle
              />
              <el-button
                type="danger"
                @click="deleteById(scope.row)"
                v-hasPermi="['USER_DELETE']"
                size="small"
                icon="el-icon-delete"
                circle
              />
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total > 0"
          @size-change="handlePageSize"
          @current-change="handlePageNumber"
          :current-page="queryInfo.pageNumber"
          :page-sizes="[7, 15, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>

      <handle v-show="open" :title="title" :form="form" @cancel="cancel" />
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import handle from "./handle.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    handle,
  },

  data() {
    //这里存放数据
    return {
      // 分页查询添加
      queryInfo: {
        // 页面
        pageNumber: 1,
        // 页数
        pageSize: 7,
        // 关键字
        queryString: null,
      },
      // 表格数据
      tableList: [],
      // 总记录数
      total: 0,
      // 表单标题
      title: null,
      // 是否打开对话框
      open: false,
      // 加载效果
      loading: false,
      // 表单数据
      form: {},
      // 表单校验
      rules: {},
      // 后端获取角色列表
      roles: [],
    };
  },

  //方法集合
  methods: {
    /**
     * 分页查询
     */
    findPage() {
      this.loading = true;
      this.$ajax.post("/user/findPage", this.queryInfo).then((res) => {
        // 对table进行重新布局
        this.$nextTick(() => {
          this.$refs.tableRef.doLayout();
        });

        this.loading = false;
        this.tableList = res.rows;
        this.total = res.total;
      });
    },

    querySearch(value) {
      this.queryInfo.queryString = value;
      this.findPage();
    },

    /* 页码改变事件 */
    handlePageNumber(newPageNumber) {
      // 将点击页码后的新数据赋值给分页参数
      this.queryInfo.pageNumber = newPageNumber;
      // 调用分页方法，获取新页码对应的数据
      this.findPage();
    },

    /* 页面显示总条数改变事件 */
    handlePageSize(newPageSize) {
      // 将点击每页几条的新数据赋值给分页参数
      this.queryInfo.pageSize = newPageSize;
      // 调用分页方法，获取新的页面总条数
      this.findPage();
    },

    insert() {
      this.open = true;
      this.form = {};
      this.title = "添加用户";
    },

    /**
     * 头像预览
     */
    preview(src) {
      let arr = [];
      arr.push(src.startsWith("https") ? src : this.$qiniu + src);
      return arr;
    },

    /**
     * 性别格式化
     */
    formatSex(row) {
      if (row.sex === 0) {
        return "男";
      } else if (row.sex === 1) {
        return "女";
      } else {
        return "保密";
      }
    },

    /* 删除用户信息 */
    deleteById(row) {
      // 判断被删除用户是否为管理员
      if (row.admin) return this.$message.warning("管理员角色不能操作！");
      this.$confirm(
        "您的操作将永久删除编号为{" + row.id + "} 的数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        // 调用后端删除角色接口
        this.$ajax.delete(`/user/delete/${row.id}`).then((res) => {
          // 显示信息
          this.$message.success(res.message);
          // 跳转到第一页数据
          this.queryInfo.pageNumber = 1;
          // 重新查询数据
          this.findPage();
        });
      });
    },

    /**
     * 用户点击返回
     */
    cancel() {
      this.open = false;
      this.findPage();
    },

    update(row) {
      this.open = true;
      this.form = row;
      this.title = "修改用户";
    },
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.findPage();
  },
};
</script>
<style scoped></style>
